<template>
  <section>
    <span v-if="['pendingFee','processedFee'].includes(fieldName)">
      {{ row[fieldName] ? formatNumber(row[fieldName]) : 0 }}
    </span>
    <!--  -->
    <span v-else
          class="contSty">
      <span>
        {{ row[objName] && row[objName][fieldName] ? formatNumber(row[objName][fieldName]) : 0 }}
      </span>
      <div v-if="(fieldName==='prepayFee'&&row.prepayFeedFlag===1) 
    || (fieldName==='arrivePayFee'&&row.arrivePayFeedFlag===1) 
    || (fieldName==='collectionFee'&&row.collectionFeedFlag===1) 
    || (fieldName==='receiptFee'&&row.receiptFeedFlag===1)"
           class="iconSty">
        <span style="font-size:12px; line-height: 1;">{{billType===1?'已收':'已付'}}</span>
        <i class="el-icon-check bingo" />
      </div>
      <span v-else>
        <el-tooltip v-if="unreconciled"
                    class="item"
                    effect="dark"
                    content="未对账"
                    placement="top-start">
          <slot>
            <icon-svg class="pointer ml8"
                      icon-name="tishi1" />
          </slot>
        </el-tooltip>
        <el-button v-if="show"
                   size="mini"
                   type="primary"
                   plain
                   @click="handleBillPayment(fieldName)">{{billType===1?'收款':'付款'}}</el-button>
      </span>
    </span>
  </section>
</template>

<script>
export default {
  name: "PayAndReceiptColumn",
  props: {
    row: {
      type: Object,
      default: () => { }
    },
    fieldName: {
      type: String,
      default: ""
    },
    objName: {
      type: String,
      default: ""
    },
    billType: {
      type: Number,
      default: null
    }
  },
  computed: {
    formatNumber () {
      return num => num ? Number(num).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') : 0;
    },
    query () {
      return {
        billType: this.billType,
        waybillId: this.row.waybillId
      }
    },
    unreconciled () {
      return this.row[this.objName] && this.row[this.objName][this.fieldName] && this.fieldName === 'receiptFee' && ![50, 60].includes(this.row.billStatus)
    },
    show () {
      return this.row[this.objName] && this.row[this.objName][this.fieldName] && (this.fieldName !== 'receiptFee' || (this.fieldName === 'receiptFee' && this.row.billStatus === 50))
    }
  },
  methods: {
    handleBillPayment (fieldName) {
      const obj = { prepayFee: 1, arrivePayFee: 2, collectionFee: 3, receiptFee: 4 }
      this.$router.push({
        name: "billPayment",
        query: {
          ...this.query,
          billRecordType: obj[fieldName]
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.el-button--mini {
  font-size: 0.75rem;
  border-radius: 0.1875rem;
  padding: 5px 8px;
  margin-left: 5px;
}
.red {
  color: var(--prev-color-text-red);
}
.contSty {
  display: flex;
  align-items: center;
}
.iconSty {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}
.ml8 {
  margin-left: 8px;
}
.bingo {
  color: #ef8555;
  font-weight: bold;
  font-size: 20px;
  line-height: 0.8;
}
</style>
